import React, { createRef } from "react";
import '../Demo3.less';
import PropTypes from 'prop-types'
import ClassTest from "./classTest";
class ClassConpont extends React.Component{
  /* 给传递的props里的属性设置默认值和规则 */
  static defaultProps = {
    x:0,
    y:0
  }
  static propTypes={
    x:PropTypes.number
  }
  constructor(props){
    super();//一旦使用了ES6继承，编写constructor函数，则进来需要先执行super()
  }
  //定义状态
  state={
    xx:100
  }
  //Ref获取DOM元素
  //current属性值为当前DOM对象
  box=createRef();
  ch1=createRef();
  handler=()=>{
    console.log(this.box.current)
    this.box.current.innerHTML++;
  }
  render(){
    let {xx} = this.state
    return(
      <div className="wrap">
        <h3>类组件</h3>
        {this.props.x}
        <br />
        {this.props.y}
        <br />
        {xx}
        <button onClick={()=>{
          /* this.state.num=200;
          this.forceUpdate() */
          this.setState({xx:300})
        }}>点击改变xx值</button>
        <h4 ref={this.box}>1</h4>
        <button onClick={this.handler}>点击改变box的值</button>
        <ClassTest ref={this.ch1} ></ClassTest>
      </div>
    )
  }
  componentDidMount(){
    console.log(this.ch1)
  }

}

export default ClassConpont

/*
类组件：动态组件
1.通过constructor接收传递的props参数
2.通过this.forceUpdate()或者setState函数进行组件更新
3.基于createRef创建ref对象，把值赋给元素可获取DOM元素，赋值给子组件（类组件），则获取子组件实例
*/